<template>
  <!-- 
  购物车：
      1、进入购物车页面进行渲染（产品列表，勾选列表，全选按钮）
      2、全选/全不选的联动 （点击每一项商品，点击全选按钮）
      3、进入编辑状态（编辑状态的切换靠isEditing来完成）
      4、删除商品（布局和删除请求，删除到为空时候的处理）
 -->
  <div>
    <Tips />
    <!-- 产品列表  -->
    <van-checkbox-group v-model="result">
      <!-- name属性需要每一项都不同，相同的话，点击会一起控制。 -->
      <van-checkbox
        :name="item.id"
        v-for="item in cartList"
        :key="item.id"
        @click="goodsItemClick(item)"
        :disabled="isEditing"
      >
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price.toFixed(2)"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
          <van-stepper
            v-model="item.number"
            v-show="isEditing"
            @change="chanStepNum(item)"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="del(item.product_id)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox>
      <!-- <van-checkbox name="b">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        /> 
      </van-checkbox>-->
    </van-checkbox-group>

    <!-- 提交订单栏 -->
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox
        v-model="checkedAll"
        :disabled="isEditing || cartList.length === 0"
        >全选</van-checkbox
      >
      <template #tip>
        累计共{{ cartTotal.goodsCount }}件商品，可点击
        <van-button
          :type="isEditing ? 'danger' : 'primary'"
          size="small"
          @click="isEditing = !isEditing"
          >{{ isEditing ? "完成编辑" : "编辑" }}</van-button
        >
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import {
  GetCartData,
  chanGoodsChecked,
  stepNum,
  DelGoods,
} from "@/request/api";
import Tips from "@/components/Tips";
import Vue from "vue";
export default {
  components: {
    Tips,
  },
  data() {
    return {
      // ui层面，决定了有没有被选中的数组。
      // 里面每一个元素可能是van-checkbox的name属性的值。
      result: [],
      // 全选复选框的值
      // checkedAll:false,
      // 定义购物车数据
      cartList: [],
      // 总数信息对象
      cartTotal: {},
      // 是否在编辑状态
      isEditing: false,
    };
  },
  computed: {
    checkedAll: {
      get() {
        // return true/false
        // 受result数组的影响
        // result数组 和 cartList数组的长度是不是相等    并且长度不为0
        return (
          this.result.length == this.cartList.length &&
          this.cartList.length !== 0
        );
      },
      set(val) {
        if (this.isEditing) return;
        // console.log("点击了全选按钮", val)   // val就是要修改成的值

        // 后端要求参数格式的处理
        let ids = this.cartList.map((item) => {
          return item.product_id;
        });
        // console.log(ids.join()); // [213, 217, 162]   =====>    213,217,162
        // console.log(ids.toString()); // [213, 217, 162]   =====>    213,217,162

        // 发起全选/全不选的请求
        chanGoodsChecked({
          isChecked: val == false ? "0" : "1", // 告诉后端点击全选按钮之后，要全部改成0 或者1
          productIds: ids.join(), // 告诉后端哪些产品需要修改
        }).then((res) => {
          // console.log(res);
          this.renderData(res.data);
        });
      },
    },
  },
  created() {
    GetCartData().then((res) => {
      console.log(res);
      // 调用渲染数据的方法
      this.renderData(res.data);
    });
  },
  methods: {
    del(pid) {
      // console.log("del", pid);
      DelGoods({
        productIds: pid.toString(),
      }).then((res) => {
        // console.log(res);
        this.renderData(res.data);
      });
    },
    chanStepNum(item) {
      console.log("修改了步进器中的数字");
      stepNum({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        // console.log("修改步进器之后的res",res);
        this.renderData(res.data);
      });
    },
    renderData(data) {
      // 每一次渲染数据之前，this.result需要做一个清空。否则，this.result的长度会越来越长，影响到选中列表和checkAll的这些值。
      this.result = [];
      let { cartList, cartTotal } = data;
      // 渲染产品列表数据
      this.cartList = cartList;
      this.cartTotal = cartTotal;

      // 渲染产品列表每一项是否被选中
      // 遍历cartList数组，如果checked为1，我就把item.id放到result数组中
      cartList.map((item) => {
        item.checked ? this.result.push(item.id) : "";
      });
    },
    onSubmit() {},
    goodsItemClick(item) {
      if (this.isEditing) return;
      // 点击每一项商品执行这里
      // console.log("点击了商品, 获取到原本的勾选状态", item.checked);
      // 点击每一项商品，发起请求告诉后端我们选中/取消选中这件商品
      chanGoodsChecked({
        isChecked: item.checked == 1 ? "0" : "1",
        productIds: item.product_id.toString(),
      }).then((res) => {
        // console.log("点击了商品的res",res);
        // 拿到数据之后需要重新渲染数据（渲染产品列表数据和产品列表每一项的勾选状态）
        // 调用渲染数据的方法
        this.renderData(res.data);
      });
    },
  },
  // 组件内的守卫
  beforeRouteEnter(to, from, next) {
    // 理解： 比全局的写法更好，不用每次跳转路由都去进行判断
    // console.log("执行了cart组件中的beforeRouteEnter");
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    let token = localStorage.getItem("token");
    if (token) {
      next();
    } else {
      Vue.prototype.$toast("请先登录！");
      // 拿不到不到token，说明没有登录，跳转到 “我的”  /user
      setTimeout(() => {
        next("/user");
      }, 800);
    }
  },
};
</script>
 
<style lang = "less" scoped>
.van-checkbox-group {
  padding: 0.1rem;
  background-color: #fff;
  .van-checkbox {
    border-bottom: 1px solid #ccc;
    padding: 0.1rem 0;
  }
  /deep/.van-checkbox__label {
    flex: 1;
  }
}
.van-submit-bar {
  bottom: 0.5rem;
}
.van-submit-bar__tip {
  display: flex;
  align-items: center;
  .van-button {
    margin: 0 0.08rem;
  }
}
.van-card__title {
  font-size: 0.18rem;
  line-height: 0.24rem;
  max-height: 0.5rem;
}
.van-card__price,
.van-card__num {
  font-size: 0.16rem;
}
.van-stepper {
  text-align: right;
}
.delete-button {
  height: 100%;
}
</style>